import { debounce } from 'assets/js/utils.js'
import BackTop from 'components/content/backtop/BackTop'

// 图片加载 mouted 事件
export const imgLoadMoutedMixins = {
  mounted() {
    // 这里是监听 图片加载的总线事件完成，然后刷新滚动插件的实时高度
    // console.log(this.$refs.refScroll);
    this.$bus.$on(
      'itemImageLoad',
      debounce(() => {
        if (this.$refs.refScroll) {
          this.$refs.refScroll.scrollRefresh()
        }
      }, 500)
    )
  },
}

// 返回头部功能的混入封装 data参数，methods方法
// 用的时候只需要在 html 中 写入 backtop组件的html 代码
export const backTopMixins = {
  components: {
    BackTop,
  },
  data() {
    return {
      showBackTop: false,
    }
  },
  methods: {
    // 回到顶部
    backToTop() {
      // console.log(this.$refs.refScroll)
      // 把返回头部的方法定义在子组件，home 组件来调用
      // 属性分别是，返回到的 x轴 y轴的位置，经过多少毫秒到顶部
      this.$refs.refScroll.backToTop(0, 0)
    },
    // 监听位置切换 showBackTop 值
    toggleBackTopFlag(positon) {
      const tempY = -positon.y
      // backtop 按钮的判断
      if (tempY >= 1000) {
        this.showBackTop = true
      } else {
        this.showBackTop = false
      }
    },
  },
}
